import { useEffect, useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Image, Swiper, SwiperItem, ScrollView } from '@tarojs/components'
import { SafeArea, Rate } from "@nutui/nutui-react-taro"

import Coord from '@/components/Coord'
import CascadeCard from "@/components/CascadeCard";
import CustomNavBar from '@/components/CustomNavBar'

import { getSystemInfo } from '@/utils'
import { mock } from "@/assets/mock";

import './index.scss'


interface ImageItem {
  id?: string | number;
  url: string;
}


const { statusBarHeight } = getSystemInfo();

function Index() {

  const [showTransition, setShowTransition] = useState(false as boolean)
  const [recommendedImages, setRecommendedImages] = useState([] as ImageItem[])
  const [recommendedCurrentIndex, setRecommendedCurrentIndex] = useState(1 as number | string)

  const getRecommendedData = () => {
    setRecommendedImages([])
  }

  const onScroll = (e) => {
    const { scrollTop } = e.detail
    // console.log('e.detail', Number(scrollTop))
    scrollTop > 100 ? setShowTransition(true) : setShowTransition(false)
  }

  const onLoad = () => {
  }


  const onHandleNavigate = (item: any = {}) => {
    const params = JSON.stringify(item);
    Taro.navigateTo({
      url: `/pages/detailInfo/index?params=${encodeURIComponent(params)}`,
    })
  }

  useEffect(() => {
    getRecommendedData()
  }, [])

  return (
    <>
      <ScrollView
        scrollY
        style={{ height: '100vh' }}
        enhanced
        showScrollbar={false}
        scrollWithAnimation
        onScroll={onScroll}
      >
        < CustomNavBar title='TRAVALE' showBack={false} showTransition={showTransition} />

        {/* 搜索框 */}

        {/* 优选推荐 */}
        <View className='home-title' style={{ paddingTop: `${statusBarHeight}px` }}>{mock?.optimizationList.title}</View>
        <View className='home-recommended'>
          <Swiper
            className='home-recommended-swiper'
            nextMargin='54px'
            current={0}
            onChange={(e) => {
              console.log('e.detail.current', e);
              const { currentItemId } = e.detail
              setRecommendedCurrentIndex(Number(currentItemId))
            }}
            circular
          >
            {
              mock.optimizationList.list?.map((item: any, index) => {
                return (
                  <SwiperItem
                    itemId={item?.id}
                    className={`home-recommended-swiper-item-container ${item?.id === recommendedCurrentIndex ? 'large' : 'small'}}`}
                  >
                    <View
                      className={`home-recommended-item ${item?.id === recommendedCurrentIndex ? 'active' : ''}`}
                      onTap={() => onHandleNavigate(item)}
                    >
                      <Coord
                        className='home-recommended-item-coord'
                        ImageSize='38px'
                        fontZize='16px'
                        coordName={item?.city}
                      />
                      <View className='home-recommended-item-title'>{item?.title}</View>
                      <Rate className='home-recommended-item-rate' defaultValue={item?.rate} readOnly allowHalf />
                      <Image
                        className='home-recommended-item-img'
                        mode="aspectFill"
                        src={item?.url}
                        lazyLoad={true}
                        onLoad={onLoad}
                      />
                    </View>
                  </SwiperItem>
                )
              })
            }
          </Swiper>
        </View>

        {/* 城市景点*/}
        {
          [1, 2].map(() => {
            return (
              <>
                <View className='home-city-attractions-title'>{mock?.cityAttractionsList.title}</View>
                <ScrollView
                  className='home-city-attractions-scroll'
                  scrollX
                  enhanced
                  showScrollbar={false}
                  scrollWithAnimation
                >
                  <View className='home-city-attractions-box'>
                    {
                      mock?.cityAttractionsList.list?.map((item) => {
                        return (
                          <View className='home-city-attractions-item' onTap={() => onHandleNavigate(item)}>
                            <Image
                              className='home-city-attractions-item-img'
                              style={{ height: '330rpx' }}
                              mode='heightFix'
                              lazyLoad={true}
                              src={item?.url} />
                            <View className='home-city-attractions-item-title'>{item?.title}</View>
                            <View className='home-city-attractions-item-subtitle'>{item?.subtitle}</View>
                          </View>
                        )
                      })
                    }
                  </View>
                </ScrollView>
              </>
            )
          })
        }

        {/* 猜你喜欢 */}
        <View className='home-city-attractions-title'>{mock.exploreList.title}</View>
        <CascadeCard onTap={onHandleNavigate} cardList={mock.exploreList.list} />
        <SafeArea position="bottom" />
      </ScrollView>
    </>


  )
}

export default Index
